<template>
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  background-color="#00142E"
  text-color="#fff"
  active-text-color="#ffd04b"
  @select="handleSelect"
>   
    <el-menu-item index="1"><img src="http://192.168.2.27:8888/assets/img/ford-logo1.png" alt=""></el-menu-item>
    <!-- <span index="1" class="car-logo">
        <img src="../../assets/img/ford-logo1.png" alt="">
    </span> -->
    <el-menu-item index="2">
      <router-link to="/home" >HOME</router-link>
    </el-menu-item>
    <el-menu-item index="3">MODEL</el-menu-item>
    <el-menu-item index="4">PARAMETER</el-menu-item>
    <el-menu-item index="5">RECOMMEND</el-menu-item>
    <el-sub-menu index="6" style="font-size: 16px" >
      <template #title>Specs</template>
      <el-menu-item v-for="(item) in itemnamelist" :key="item" @click="changerouter()">
        <router-link :to="{path: '/cardeal',query: { id: item.id}}">{{item.itemname}}</router-link>
        
      </el-menu-item>
      <!-- <el-menu-item index="6-1">Shelby</el-menu-item>
      <el-menu-item index="6-2">GT-500</el-menu-item>
      <el-menu-item index="6-3">Cobra Jet</el-menu-item>   @select="handleSelect"-->
  </el-sub-menu>

</el-menu>
</template>

<script>
export default {
data() {
      return {
        activeIndex2: '',
        iscolor: false,
        itemnamelist: [
          { id: 's1',itemname:'Shelby'},
          { id: 's2',itemname:'GT-500'},
          { id: 's3',itemname:'Cobra Jet'},
       ],
       scrollTop: 0
      }
    },
    watch: {
      
      activeIndex2() {
        // switch(this.activeIndex2) {
        //   case 1 
        // }
        return 
      }
    },
    mounted() {
      window.addEventListener("scroll",this.scrollmove,true)
    },
    methods: {
      handleSelect(key) {
        // console.log(key)
        if(key >=3 && key<= 5) {
          this.$emit('jump',key)
        }
        
      },
      changerouter() {
        window.location.reload();
      },
      scrollmove() {
        
        // let that = this;
        //获取滚动距离
        // console.log(window.innerWidth)
        if(window.innerWidth> 768) {
          let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
          this.scrollTop = scrollTop;
          // console.log(this.scrollTop)
          if(this.scrollTop < 400) {
            this.activeIndex2 = 2
          }else if(this.scrollTop > 400 && this.scrollTop < 1339) {
            // console.log('大于1000')
            this.activeIndex2 = 3
          }else if(this.scrollTop > 1340 && this.scrollTop < 1549) {
            this.activeIndex2 = 4
          }else if(this.scrollTop >1550) {
            this.activeIndex2 = 5
          }
        }
      }
    },
}
</script>

<style  scoped>
a {
  text-decoration: none;
  color: white;
}
img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}
.car-logo {
    width: 10%;
    /* height: 80px; */
    /* background-color: white; */
    margin-right: 20px;
    overflow: hidden;
}
a {
    text-decoration: none;
}
.el-menu {
    max-width: 1100px;
    margin: 0 auto;
}
.el-menu:hover {
  /* background-color: #00142E; */
  background-color: rgba(0,20,47,.6);
}
.el-menu-item {
    height: 80px;
    font-size: 16px;
    font-weight: 600;
}
.el-sub-menu {
    height: 80px;
    font-size: 25px;
    font-weight: 600;
}
</style>